import React from 'react';
import ProductList from '../../Component/productList'
import { Input,Button,Table} from 'antd';
import { inject, observer } from 'mobx-react';
import '../../public/css/product.css'
import conveyStatus from '../../util/conveyStatus'

const Search = Input.Search;

const columns = [{
    title: '客户名称',
    dataIndex: 'appName',
    key: 'appName',
}, {
    title: '产品',
    dataIndex: 'product',
    key: 'product',
}, {
    title: '接口价格',
    dataIndex: 'price',
    key: 'price',
},
    {
        title: '使用限制',
        dataIndex: 'useLimit',
        key: 'useLimit',
    }];

const data = [{
    key: '1',
    name: 'John Brown',
    product: '产品',
    code: 'New York No. 1 Lake Park',
    date:'2018-1-1'
}, {
    key: '2',
    name: 'Jim Green',
    product: '产品',
    code: 'London No. 1 Lake Park',
    date:'2018-1-1'
}, {
    key: '3',
    name: 'Joe Black',
    product: '产品',
    code: 'Sidney No. 1 Lake Park',
    date:'2018-1-1'
}];

@inject('productModule')
@observer
export default class PeoductSubs extends React.Component {
    constructor(props){
        super(props)
        this.getProductDetail=this.getProductDetail.bind(this)
        this.handelFilterProductList=this.handelFilterProductList.bind(this)
        this.handelSubscript=this.handelSubscript.bind(this)
    }
    componentWillMount() {
        this.props.productModule.getProductList().then(()=>{
            this.props.productModule.getProductDetail()
        })

    }
    getProductDetail(e){
        e.target.id?this.props.productModule.param.ProductDetailId.id=e.target.id:null
        this.props.productModule.getProductDetail()
        this.props
        this.props.productModule.getInterfaceConfigList()
    }
    handelFilterProductList(value){
        this.props.productModule.ProductListData=this.props.productModule.ProductListData.filter(e=>{
            return e.name.indexOf(value)!=-1
        })
    }
    handelSubscript(){
        console.log(this.props.productModule.ProductDetail.orderStatus)
        if(this.props.productModule.ProductDetail.orderStatus==1){
            this.props.productModule.productUnSubscription().then(()=>{
            })
        }else{
            this.props.productModule.productSubscription().then(()=>{
                this.props.productModule.getProductDetail()
            })
        }
    }
    render(){
        const {ProductListData,ProductDetail,ProductListDataAll,tableData}=this.props.productModule
        const {code,type,charge_type,subsCharge,use_limit,user_restrict,description,out_bundle_use,create_time,orderStatus}=ProductDetail
        return (
            <div className="h100 w100" >
                <div className="product-sidernav  br-r-d8 h100 dib v-t">
                    <div className="select-warp" style={{"maxWidth":"200px"}}>
                        <Search
                            placeholder="产品名称/API名称"
                            style={{ width: '200px' }}
                            onSearch={this.handelFilterProductList}
                            enterButton
                            onInput={(e)=>{e.target.value.trim()==''?this.props.productModule.ProductListData=ProductListDataAll:null}}
                        />
                    </div>
                    {ProductListData.map((e,i)=>{
                        return (
                            <ProductList infoObj={e} key={e.id||i}  getProductDetail={this.getProductDetail}></ProductList>
                        )
                    }) }
                </div>
                    <div className="w100" style={{'paddingLeft':'230px'}}>
                        <div className="p20 w100">
                            <div className="htilte mb-20 dib v-t w100" >
                                <h2 className="dib f18 fwb ">客户维护</h2>
                            </div>
                            <Button className='mb-10' onClick={this.handelSubscript}>{orderStatus=='1'?"已订阅":"未订阅"}</Button>
                            <table className="info-table">
                                <tbody>
                                <tr>
                                    <td className="lightgray">产品编码:</td>
                                    <td >{type||'暂无数据'}</td>
                                </tr>
                                <tr>
                                    <td className="lightgray">产品类型:</td>
                                    <td>{conveyStatus(code,'type')||'暂无数据'}</td>
                                </tr>
                                <tr>
                                    <td className="lightgray">计费类型:</td>
                                    <td>{conveyStatus(charge_type,'charge_type')||'暂无数据'}</td>
                                </tr>
                                <tr>
                                    <td className="lightgray">订购价格:</td>
                                    <td>{subsCharge||'暂无数据'}</td>
                                </tr>
                                <tr>
                                    <td className="lightgray">月使用量:</td>
                                    <td>{conveyStatus(use_limit,'use_limit')||'暂无数据'}</td>
                                </tr>
                                <tr>
                                    <td className="lightgray">用户限制:</td>
                                    <td>{conveyStatus(user_restrict,'user_restrict')||'暂无数据'}</td>
                                </tr>
                                <tr>
                                    <td className="lightgray">产品描述:</td>
                                    <td>{description||'暂无数据'}</td>
                                </tr>
                                <tr>
                                    <td className="lightgray">套餐外使用:</td>
                                    <td>{conveyStatus(out_bundle_use,'out_bundle_use')||'暂无数据'}</td>
                                </tr>
                                <tr>
                                    <td className="lightgray">产品创建时间:</td>
                                    <td>{create_time||'暂无数据'}</td>
                                </tr>
                                </tbody>
                            </table>
                            <div className="htilte mb-20 dib v-t w100 mt-20" >
                                <h2 className="dib f18 fwb ">我的产品</h2>
                            </div>
                            <Table
                                columns={columns}
                                dataSource={tableData.slice()}
                                loading={false}
                                rowKey="id"
                            />
                        </div>

                    </div>


            </div>
        )
    }
}